<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no,email=no"/>
    <title>答题</title>
    <link href="http://cdn.bootcss.com/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/page/dalibai.css">
    <link rel="stylesheet" href="../static/css/page/answerQuestion.css">
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_ogyhajkznay8pvi.css">
    <script type="text/javascript" src="../static/js/public/computeDPR.my.js"></script>
</head>
<body class="swiper-container">
<header class="title"><a class="butt left" href="my.html">返回</a>答题</header>
<div class="swiper-wrapper">
    <div class="scroll swiper-slide">
        <ul class="answer-list">
            <li>
                <p>
                    1、香烧完的时间是一<input type="text"><span>?</span>小时<input type="text"><span>?</span>小时
                </p>
                <div class="daan">
                    <div class="answer">
                        友情提示：Tooltip（提示框）是一种常见的效果，它通常用在需要进一步解释、说明或提示的某个词上。这种小效果实现起来虽然不难，但如果你想不劳而获，可以试试 Tipso。
                        <button class="close">关闭</button>
                    </div>
                    <div class="answer">
                        友情提示：123
                        <button class="close">关闭</button>
                    </div>
                </div>
                <button class="button button-1" type="submit">提交</button>
            </li>
            <li>
                <p>
                    1、香烧完的时间是一<input type="text"><span>?</span>小时<input type="text"><span>?</span>小时
                </p>
                <div class="daan">
                    <div class="answer">
                        友情提示：Tooltip（提示框）是一种常见的效果，它通常用在需要进一步解释、说明或提示的某个词上。这种小效果实现起来虽然不难，但如果你想不劳而获，可以试试 Tipso。
                        <button class="close">关闭</button>
                    </div>
                    <div class="answer">
                        友情提示：123
                        <button class="close">关闭</button>
                    </div>
                </div>
                <button class="button button-1" type="submit">提交</button>
            </li>
            <li>
                <p>
                    1、香烧完的时间是一<input type="text"><span>?</span>小时<input type="text"><span>?</span>小时
                </p>
                <div class="daan">
                    <div class="answer">
                        友情提示：Tooltip（提示框）是一种常见的效果，它通常用在需要进一步解释、说明或提示的某个词上。这种小效果实现起来虽然不难，但如果你想不劳而获，可以试试 Tipso。
                        <button class="close">关闭</button>
                    </div>
                    <div class="answer">
                        友情提示：123
                        <button class="close">关闭</button>
                    </div>
                </div>
                <button class="button button-1" type="submit">提交</button>
            </li>
            <li>
                <p>
                    1、香烧完的时间是一<input type="text"><span>?</span>小时<input type="text"><span>?</span>小时
                </p>
                <div class="daan">
                    <div class="answer">
                        友情提示：Tooltip（提示框）是一种常见的效果，它通常用在需要进一步解释、说明或提示的某个词上。这种小效果实现起来虽然不难，但如果你想不劳而获，可以试试 Tipso。
                        <button class="close">关闭</button>
                    </div>
                    <div class="answer">
                        友情提示：123
                        <button class="close">关闭</button>
                    </div>
                </div>
                <button class="button button-1" type="submit">提交</button>
            </li>
            <li>
                <p>
                    1、香烧完的时间是一<input type="text"><span>?</span>小时<input type="text"><span>?</span>小时
                </p>
                <div class="daan">
                    <div class="answer">
                        友情提示：Tooltip（提示框）是一种常见的效果，它通常用在需要进一步解释、说明或提示的某个词上。这种小效果实现起来虽然不难，但如果你想不劳而获，可以试试 Tipso。
                        <button class="close">关闭</button>
                    </div>
                    <div class="answer">
                        友情提示：123
                        <button class="close">关闭</button>
                    </div>
                </div>
                <button class="button button-1" type="submit">提交</button>
            </li>
            <li>
                <p>
                    1、香烧完的时间是一<input type="text"><span>?</span>小时<input type="text"><span>?</span>小时
                </p>
                <div class="daan">
                    <div class="answer">
                        友情提示：Tooltip（提示框）是一种常见的效果，它通常用在需要进一步解释、说明或提示的某个词上。这种小效果实现起来虽然不难，但如果你想不劳而获，可以试试 Tipso。
                        <button class="close">关闭</button>
                    </div>
                    <div class="answer">
                        友情提示：123
                        <button class="close">关闭</button>
                    </div>
                </div>
                <button class="button button-1" type="submit">提交</button>
            </li>
            <li>
                <p>
                    1、香烧完的时间是一<input type="text"><span>?</span>小时<input type="text"><span>?</span>小时
                </p>
                <div class="daan">
                    <div class="answer">
                        友情提示：Tooltip（提示框）是一种常见的效果，它通常用在需要进一步解释、说明或提示的某个词上。这种小效果实现起来虽然不难，但如果你想不劳而获，可以试试 Tipso。
                        <button class="close">关闭</button>
                    </div>
                    <div class="answer">
                        友情提示：123
                        <button class="close">关闭</button>
                    </div>
                </div>
                <button class="button button-1" type="submit">提交</button>
            </li>
        </ul>
    </div>
</div>
</body>
<script src="http://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
<script>
    $('.answer-list > li > p > span').each(function (i) {
        $(this).click(function () {
            $('.answer-list > li > .daan > .answer').hide().eq(i).show();
            ;
        })
    });
    $('.close').click(function () {
        $('.answer-list > li > .daan > .answer').hide();
    });

</script>
</html>